<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="referrer" content="never"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css?version=2" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		.upload-btn {
			width: 100px;
			height: 34px;
			position: relative;
			display: inline-block;
			margin-right: 20px;
			margin-bottom: 10px;
		}
		.upload-btn button {
			width: 100px;
			border-radius: 15px;
			position: absolute;
		}
		.upload-file-a {
			display:inline-block;
			width: 100px;
			height: 34px;
			position:relative; 
			overflow:hidden;
		}
		.upload-btn input::-webkit-file-upload-button {
            width: 100px;
            height: 34px;
            border: none;
            position: absolute;
            outline: 0;
            opacity: 0;
        }
		.upload-btn input[type='file'] {
            display: block;
            border: 0;
            vertical-align: middle;
            position:absolute; 
		    width: 100px; 
		    height: 34px; 
		    right:0; 
		    top:0; 
		    font-size:100px; 
		    opacity:0; 
		    filter:alpha(opacity=0);
        }
        .promt-font {
        	color: #666;
        }
        .edit-content {
        	position: fixed;
        	top: 100px;
        	left: 10px;
        	right: 10px;
        	bottom: 55px;
        	border: 1px solid #A1A1A1;
        	overflow-x: hidden;
			overflow-y: auto;
        }
        .edit-content img {
        	max-width: 100%;
        }
        .edit-content::-webkit-scrollbar-track-piece { 
			background-color:#f8f8f8;
		}
		.edit-content::-webkit-scrollbar {
			width:5px;
			height:5px;
		}
		.edit-content::-webkit-scrollbar-thumb {
			background-color:#dddddd;
			background-clip:padding-box;
			min-height:10px;
		}
		.edit-content::-webkit-scrollbar-thumb:hover {
			background-color:#bbb;
		}
		.edit-content:empty:before{
		    content: attr(placeholder);
		    font-size: 14px;
		    color:#a9a9a9;
		}
		.edit-content:focus:before{
		    content:none;
		}
		.next-step {
			position: fixed;
			left: 10px;
        	right: 10px;
			bottom: 10px;
		}
		.next-step button.active {
			background-color: #11B5AB;
		    color: #fff;
		    border-color: #11B5AB;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="upload-btn">
			<button type="button" class="btn btn-default">上传图片</button>
			<a class="upload-file-a">
				<input type="file" name="eidtorImg" value="" accept="image/*" multiple onchange="handleInputChange(this);" />
			</a>
		</div>
		<div class="promt-font">编辑内容</div>
		<div id="content" class="edit-content" contenteditable="true" placeholder="编辑正文">
			
		</div>
		<div class="next-step">
			<button type="button" id="nextStep" class="btn btn-block" disabled="disabled">发布</button>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var contentData;
		var userID,companyID,articleID;
		$(function(){
			contentData = $.cookie("contentData");
			articleID = base.getParameter("articleID");
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			console.log(contentData);
			$("#content").focus();
			if (articleID != null && articleID != "") {
            	base.postData(base.url.getArticleInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackGetArticleInfo);
            }
		});	
		function callbackGetArticleInfo(data) {
			if (data.success) {
				$('#nextStep').removeAttr('disabled');
				$("#nextStep").addClass("active");
				$("#content").html(data.context.articleContent);
			}
		}	
		$("#content").on("keyup",function(){
			var content = $("#content").html();
			if (content != null && content != "") {
				$('#nextStep').removeAttr('disabled');
				$("#nextStep").addClass("active");
			}else{
				$('#nextStep').attr('disabled','disabled');
				$("#nextStep").removeClass("active");
			}
		});
		$("#nextStep").click(function(){
			contentData = eval('(' + contentData + ')');
			if (contentData == null || contentData.userID == "") {
				toastr.warning("参数不能为空！");
				return;
			}
			contentData["content"] = $("#content").html();
			base.postData(base.url.updateArticleInfo, contentData, callbackUpdateArticleInfo);
		});	
		function callbackUpdateArticleInfo(data) {
			if (data.success) {
				$.cookie("contentData", null, {expires: -1});
				window.parent.location = data.context.QRCodeUrl;
			}else{
				toastr.warning(data.msg);
			}
		}
//		$(".upload-btn").click(function(){
//			// 获取选定对象
//			var selection = getSelection();
//			// 设置最后光标对象
//			var lastEditRange = selection.getRangeAt(0)
//			console.log(lastEditRange)
//		})
		//上传INPUT
		function handleInputChange(obj){
			//先判断是否已有五张图片
			var fileData = event.target.files[0];
			var imgMasSize = 1024 * 1024 * 5; // 5MB
			if ($(obj).attr("name") == "eidtorVideo") {
				imgMasSize = 1024 * 1024 * 50; // 50MB
				// 检查文件类型
			    if(['mp4', 'webm', 'ogg'].indexOf(fileData.type.split("/")[1]) < 0){
			        toastr.warning("文件类型仅支持 mp4/webm/ogg！");
			        return;
			    }
			    // 文件大小限制
			    if(fileData.size > imgMasSize ) {
			        // 文件大小自定义限制
			        toastr.warning("文件大小不能超过50MB！");
			        return;
			    }
			}else {
				// 检查文件类型
			    if(['jpeg', 'png', 'gif', 'jpg', 'bmp'].indexOf(fileData.type.split("/")[1]) < 0){
			        toastr.warning("文件类型仅支持 jpeg/png/gif/jpg!");
			        return;
			    }
			    // 文件大小限制
			    if(fileData.size > imgMasSize ) {
			        // 文件大小自定义限制
			        toastr.warning("文件大小不能超过5MB！");
			        return;
			    }
			}
			uploadFile(obj,fileData);
		}
		//上传图片
		function uploadFile(obj,files){
			toastr.info("正在上传，请稍等...");
			var formData = new FormData();
			formData.append('Filedata', files);
			if ($(obj).attr("name") == "eidtorVideo") {
				formData.append('type', 2);
			}else{
				formData.append('type', 1);
			}
			$.ajax({
	            url: base.url.uploadFile,
	            method: 'POST',
	            data: formData,
	            contentType: false, // 注意这里应设为false
	            processData: false,
	            cache: false,
	            success: function(data) {
	            	console.log(data.obj);
	            	$("#content").append('<p style="padding: 0 10px;"><img style="max-width:100%;" src="'+data.obj+'" /></p><p>&nbsp;</p>');
	            	$('#nextStep').removeAttr('disabled');
					$("#nextStep").addClass("active");
	            },
	            error: function (jqXHR) {
	                toastr.warning(JSON.stringify(jqXHR));
	            }
	        })
		}
	</script>	
</body>
</html>
